<template>
	<view class="topic-wrap">
		<!-- tab导航开始 -->
		<Tabs @changeIndex="tabTap" :tabBars="tabBars" :tabIndex="tabIndex"></Tabs>
		<!-- tab导航结束 -->
		<!-- 新闻列表开始 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{ height: swiperHight + 'px' }" :current="tabIndex" @change="tabChnage">
				<swiper-item v-for="(items, index) in newslist" :key="index">
					<scroll-view @scrolltolower="pullUpLoad(index)" scroll-y class="list">
						<template v-if="items.list.length">
							<!-- 图文列表 -->
						<UpdateNews :list="items.list"></UpdateNews>
							<!-- 上拉加载 -->
							<PullUpLoad :loadtext="items.loadtext"></PullUpLoad> 
						</template>
						<!-- 没有图文数据显示的图片 -->  
						<template v-else>
							<NothingPic></NothingPic>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 新闻列表结束 -->
	</view>
</template>

<script>
import Tabs from '@/components/tabs/tabs';
import UpdateNews from '@/components/Update-News/Update-News';
import PullUpLoad from '../../components/pullUpLoad/pullUpLoad.vue';
import NothingPic from '../../components/nothingPic/nothingPic';
export default {
	components: {
		Tabs,
		UpdateNews,
		PullUpLoad,
		NothingPic
	},
	data() {
		return {
			// swiper高度
			swiperHight: 200,
			tabIndex: 0,
			tabBars: [
				{ name: '关注', id: 'guanzhu' },
				{ name: '推荐', id: 'tuijian' },
				{ name: '体育', id: 'tiyu' },
				{ name: '热点', id: 'redian' },
				{ name: '财经', id: 'caijing' },
				{ name: '娱乐', id: 'yule' }
			],
			newslist: [
				{
					loadtext: '上拉加载更多',
					list: [
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						}
					]
				},
				{
					loadtext: '上拉加载更多',
					list: [
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						}
					]
				},
				{
					loadtext: '上拉加载更多',
					list: [
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: 10
						}
					]
				},
				{
					loadtext: '上拉加载更多',
					list: []
				},
				{
					loadtext: '上拉加载更多',
					list: []
				},
				{
					loadtext: '上拉加载更多',
					list: []
				}
			]
		};
	},
	onLoad() {
		// 获取可使用窗体高度
		uni.getSystemInfo({
			success: res => {
				let hight = res.windowHeight - uni.upx2px(100);
				this.swiperHight = hight;
			}
		});
	},
	methods: {
		// 切换顶部tab点击颜色
		tabTap(index) {
			this.tabIndex = index;
		},
		tabChnage(e) {
			/* 获取swiper滚动的索引 */
			let curentIndex = e.detail.current;
			this.tabIndex = curentIndex;
		},
		// 上拉加载更多
		pullUpLoad(index) {
			// 判断数据
			if (this.newslist[index].loadtext !== '上拉加载更多') {
				return;
			}
			// 修改状态
			this.newslist[index].loadtext = '加载中...';
			setTimeout(() => {
				let obj = {
					titlepic: '../../static/demo/topicpic/13.jpeg',
					title: '话题名称',
					desc: '我是话题描述',
					totalnum: 50,
					todaynum: 10
				};

				this.newslist[index].list.push(obj);
				this.newslist[index].loadtext = '上拉加载更多';
			}, 1000);
			// this.news[index].loadtext = '没有加载的数据'
		}
	}
};
</script>

<style lang="less">
.uni-tab-bar {
	.swiper-box {
		.list {
			.loadText {
				color: #aaa;
				padding: 20rpx;
				text-align: center;
			}
		}
	}
}
</style>
